// 路径处理
const path = require("path");
// 导入自动生成 HTML 文件的插件
const htmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

// 导出配置对象
module.exports = {
    // 项目入口
    entry: path.join(__dirname, "./src/main.js"),
    output: {
        // 输出路径
        path: path.join(__dirname, "./dist"),
        // 输出的文件名
        filename: "bundle.js"
    },
    // 配置 dev-server 命令参数， --open --port 3000 --contentBase src --hot
    devServer: {
        // open: true,
        port: 3000,
        // 托管目录
        contentBase: "src",
        // 热更新
        hot: true,
    },
    // 配置插件
    plugins: [
        new VueLoaderPlugin(),
        // 新创建热更新模块
        new webpack.HotModuleReplacementPlugin(),
        // 在内存中生成 HTML 页面
        new htmlWebpackPlugin({
            // 指定模板页面，将来会根据指定的页面路径去生成内存中的页面
            template: path.join(__dirname, "./src/index.html"),
            // 指定生成的页面名称
            filename: "index.html"
        })
    ],
    // 配置所有第三方模块加载器
    module: {
        rules: [
            {
                // 处理 .css 文件, use 插件从右边开始处理, 即 css-loader -> style-loader
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                // 处理 .less 文件
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                // 处理 scss 文件
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                // 处理 url 图片路径
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: "url-loader?limit=31606&name=[name]-[hash:6].[ext]"
            },
            {
                // 处理字体
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use: "url-loader"
            },
            {
                // 使用 babel 转换高级 es 语法
                test: /\.js$/,
                use: "babel-loader",
                // 排除 node_modules 模块
                exclude: /node_modules/
            },
            {
                // 处理 .vue 文件
                test: /\.vue$/,
                use: "vue-loader"
            },
        ]
    },
    resolve: {
        
    },
    // 模式配置
    mode: "development"

}
